<template>
	<view class="con">

		<view class="forms">
			<view class="title">
				填写信息
			</view>
			<view class="li-item">
				<view class="l">
					联系人
				</view>
				<view class="r">
					<input class="input uni-input" :enableNative='false' placeholderStyle="color: #333" :always-embed="true" :adjust-position="true" cursor-spacing="30"
						v-model="selectAddr.consignee" type="text" placeholder="请输入联系人">
				</view>
			</view>
			<view class="li-item">
				<view class="l">
					选择地址
				</view>
				<view class="r picker" @click="toggleMaskLocation">
					<view class="">
						{{addressByPcrs}}
					</view>
				</view>
				
			</view>
			<view class="li-item">
				<view class="l">
					详细地址
				</view>
				<view class="r">
					<input class="input uni-input" :enableNative="false" placeholderStyle="color: #333" :always-embed="true" :adjust-position="true" cursor-spacing="30"
						v-model="selectAddr.address" type="text" placeholder="请输入详细地址">
				</view>
			</view>

			<view class="li-item">
				<view class="l">
					联系电话
				</view>
				<view class="r">
					<input class="input uni-input" :enableNative="false" placeholderStyle="color: #333" 
						maxlength="11" v-model="selectAddr.mobile" type="text" placeholder="请输入联系电话">
				</view>
			</view>
			<view class="gf">

			</view>
		</view>
		<view class="footer">
			<view class="add_info" @click="setAddress">
				确认
			</view>
		</view>
	
		<gk-city
			:headtitle="headtitle"
			:provincedata="provincedata"
			:data="selfData"
			mode="cityPicker"
			ref="cityPicker"
			@funcvalue="getpickerParentValue"
			:pickerSize="3"></gk-city>
	</view>
</template>

<script>
	import {
		addEditAddress,
		detailAddress,
		getAreaList
	} from '@/api/address.js';
	import Gkcity from "@/components/gk-city/gk-city.vue"
	export default {
		data() {
			return {
				title: "",
				longitude: "",
				latitude: "",
				markers: [],
				show: false,
				forId:"",
				selectAddr: {
					consignee:null,
					address: null,
					mobile: null,
					province:'',
					city:'',
					district:'',
					address_id:0
				},
				selfData:[{
						"text":"河北省",
						"value":"3"
					}],
				provincedata:[
					{
						"text":"河北省",
						"value":"3"
					}
				],
				showdata:false,
				addressByPcrs:"请选择所在地",
				headtitle:"请选择所在地"
			}
		},
		components:{
			Gkcity
		},
		mounted() {

		},
		onLoad(option) {
			if (!option.address_id) {} else {
				//如果有address_id调用接口回显地址信息
				this.addressDetail((option.address_id))
			}
			this.forId = option.forId
			console.log(this.forId)
			this.init()
		},
		methods: {
			async init() {
				// await this.getAddrData()
			},
			addressDetail(address_id) {
				const data = {
					address_id,
					user_id: uni.getStorageSync("userInfo").user_id
				}
				detailAddress(data).then(res => {
					console.log(res)
					this.selectAddr = res.data
					this.addressByPcrs = res.data.provinceName+res.data.cityName+res.data.districtName+res.data.twonName
				})
			},
			
			toggleMaskLocation(){
				this.$nextTick(()=>{
					console.log()
					this.$refs["cityPicker"].show();
				})
				 // this.$refs.scroll.open()
			},
			chooseSuccess(e) {
			    console.log('============:', e)
				console.log(e.value)
				let addrData = e.value
				this.addressByPcrs=addrData.map(o=>{return o.label}).join(" ")
				this.selectAddr.province  = addrData[0].value
				this.selectAddr.city  = addrData[1].value
				this.selectAddr.district = addrData[2].value
				this.selectAddr.twon = addrData[3].value
				this.selectAddr.provinceName  = addrData[0].label
				this.selectAddr.cityName  = addrData[1].label
				this.selectAddr.districtName = addrData[2].label
				this.selectAddr.twonName = addrData[3].label
			},
			getpickerParentValue(data){
				console.log(data);  //获取地址的value值
				this.provincedata=data;
				this.addressByPcrs=data.map(o=>{return o.text}).join(" ")
				this.selectAddr.province  = data[0].value
				this.selectAddr.city  = data[1].value
				this.selectAddr.district = data[2].value
			},
	
			toLocation() {
				this.show = true
			},

			setAddress() {
				console.log(this.selectAddr)

				if (this.selectAddr.consignee == "") {
					uni.showToast({
						title: "请输入联系人姓名",
						icon: 'none'
					})
					return false
				}
				if (!this.selectAddr.province || !this.selectAddr.city||!this.selectAddr.district) {
					uni.showToast({
						title: "请选择地区",
						icon: 'none'
					})
					return false
				}
				
				// if (!this.selectAddr.address) {
				// 	uni.showToast({
				// 		title: "请选择详细地址",
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				let reg = /^1[3456789]\d{9}$/;

				if (!reg.test(this.selectAddr.mobile)) {
					uni.showToast({
						title: "请输入正确的联系方式",
						icon: 'none'
					})
					return false
				}
				let openid = uni.getStorageSync("userInfo").openid
				addEditAddress({
					...this.selectAddr,
					openid
				}).then(res => {
					console.log(res)
					if (res.status == 1) {
						if (this.selectAddr.address_id!=0) {
							uni.navigateBack({
								url: "/package/address/index"
							})
							if (this.selectAddr.is_default == 1) {
								// uni.setStorageSync("address",this.selectAddr)
								this.$store.commit("setAddress", {
									address: this.selectAddr
								})
							}
						} else {
							if (this.forId == "addorder") {
								this.selectAddr.address_id = res.data
								this.$store.commit("setAddress", {
									address: this.selectAddr
								})
								uni.navigateBack({
									url: "/package/addOrder/index"
								})
							} else {
								uni.navigateBack({
									url: "/package/addOrder/index"
								})
							}
						}


					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'addrSet.scss';
</style>